<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin: 0;
            padding: 0;
            background-color: antiquewhite;
            display: flex;
            flex-flow: column nowrap;
        }
        header{
            display: flex;
            align-items: center;
            width:99%;
            height:50px;
            /*border: 1px solid red;*/
            padding-left: 20px;
            /*margin-top: 20px;*/
        }
        .main{
            width:25%;
            min-height: 500px;
            margin-left: 700px;
            margin-top: 100px;
            margin-bottom: 100px;
            /*border: 1px solid red;*/
            background-color: #edfaff;
        }
        footer{
            width:100%;
            min-height: 100px;
            /*border: 1px solid red;*/
            margin-top: 100px;
            background-color: #0C0C0C;
        }
    </style>
</head>
<body>
<header>
    <a href="">回到前台</a>
</header>
<div class="main">
    <form action="">
        <div style="font-size: 24px;margin: 42px 130px;">欢迎来到XXX后台</div>
        <br>
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-inline">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>

    </form>
</div>
<footer>
    <a href="">尾部</a>
</footer>
</body>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</html>